<template>
  <div class="home_map">
    <div class="top">
      <span>
        <picker
          mode="selector"
          :range="cityList"
          range-key="label"
          @change="cityChange"
        >
          <span>{{ city.label || "北京" }}</span>
        </picker>
      </span>
      <span>请在这里输入区域/商圈</span>
    </div>
    <div class="tab">
      <dl class="house" @click="navlink('/pages/home/House/House')">
        <dt>
          <img src="/../../../static/买房.png" alt="" />
        </dt>
        <dd>买房</dd>
      </dl>
      <dl @click="navlink('/pages/home/House/Renting')">
        <dt>
          <img src="/../../../static/租房.png" alt="" />
        </dt>
        <dd>租房</dd>
      </dl>
    </div>
    <div class="nav">
      <span @click="navlink('/pages/home/map/area/index')">区域</span>
      <span @click="navlink('/pages/home/map/price/index')">价格</span>
      <span @click="navlink('/pages/home/map/house/index')">户型</span>
      <span @click="navlink('/pages/home/map/distance/index')">筛选</span>
      <span @click="navlink('/pages/home/House/House')">
        <img src="../../../static/filter.png" alt="" />
      </span>
    </div>
    <view class="map">
      <map
        :show-location="true"
        :markers="markers"
        :include-points="markers"
        @labeltap="labelTap"
      >
      </map>
    </view>
  </div>
</template>

<script>
import { getConsult } from "../../../server/index";
export default {
  data() {
    return {
      cityList: [],
      city: {},
      areaId: "",
      areaList: [],
    };
  },
  watch: {
    areaId: {
      handler: async function (value) {
        if (value) {
          let result = await getConsult(
            `http://157.122.54.189:9060/area/map?id=${value}`
          );
          if (result.status == 200 && result.body.length) {
            this.areaList = result.body;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    markers() {
      return this.areaList.map((item, index) => {
        return {
          id: index,
          ...item.coord,
          label: {
            content: `${item.label}有${item.count}套房子`,
            color: "#fff",
            fontSize: 12,
            padding: 6,
            bgColor: "#70D298",
            textAlign: "center",
            borderRadius: 5,
          },
          width: 0,
          height: 0,
        };
      });
    },
  },
  async onShow() {
    let city = await getConsult("http://157.122.54.189:9060/area/city?level=1");
    if (city.status == 200) {
      this.cityList = city.body;
      this.city = this.cityList[0];
      this.areaId = this.city.value;
    }
  },

  methods: {
    cityChange(e) {
      this.city = this.cityList[e.target.value];
      this.areaId = this.cityList[e.target.value].value;
    },
    labelTap({ detail: { markerId } }) {
      this.areaId = this.areaList[markerId].value;
    },
    navlink(path) {
      console.log(path);
      uni.redirectTo({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home_map {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    margin-top: 20rpx;
    span:nth-child(1) {
      display: inline-block;
      padding: 20rpx 30rpx;
    }
    span:nth-child(2) {
      width: 400rpx;
      color: #999999;
      border: 1rpx solid #cccccc;
      display: inline-block;
      padding: 10rpx 20rpx;
      background: #f4f4f4;
    }
  }
  .tab {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    dl {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 120rpx;
        height: 100rpx;
      }
    }
    .house {
      color: red;
    }
  }
  .nav {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx #000;
    span {
      flex: 1;
      text-align: center;
    }
    img {
      width: 35rpx;
      height: 35rpx;
    }
  }
  .map,
  map {
    width: 100%;
    height: 100%;
  }
}
</style>